/**
 * Created by guiyongdong on 2017/6/19.
 */
import React, {Component} from 'react';
import './AppHead.css';
import {Link} from 'react-router-dom';
import Utils from '../Utils';

const itemInfos = [
    {
        name:"首页",
        link:"/"
    },
    {
        name:"服务",
        link:"/server"
    },
    {
        name:"案例",
        link:"/example"
    },
    {
        name:"关于",
        link:"/about"
    }
];

export default class AppHead extends Component {

    // 构造
    constructor(props) {
        super(props);
        this._renderPhone = this._renderPhone.bind(this);
        this._renderItems = this._renderItems.bind(this);
        // 初始状态
        this.state = {
            index:props.index,
            showItem:false
        };
    }

    componentWillReceiveProps(props) {
        if (props.index !== this.state.index) {
            this.setState({
                index:props.index,
                showItem:false
            })
        }
    }

    /*渲染items*/
    _renderItems() {
        if (!this.state.showItem) {
            return;
        }
        let items = [];
        for (let i=0; i< itemInfos.length; i++) {
            let LinkInfo = itemInfos[i];
            let style = {};
            if (this.state.index === i) {
                style = {
                    color: "#FF4800"
                };
            }
            items.push(
                <div className="HeadItemView" key={i}>
                    <Link  to={LinkInfo['link']}>
                        <button className="HeadItem" style={style} onClick={()=>{
                            sessionStorage.index = i;
                            this.setState({
                                index:i,
                                showItem:false
                            })
                        }}>
                            {LinkInfo['name']}
                        </button>
                    </Link>
                </div>

            );
        }

        return(
            <div className="NavItemView">
                {items}
            </div>
        );

    }

    _renderPhone() {
        return(
            <div className="AppHead">
                <div className="AppNavView">
                    <div className="HeadName" style={{width:280}}>
                        <p className="logoName" style={{marginLeft:10}}>郑州佰胜网络科技有限公司</p>
                        <p>一流的软件服务商，互联网开发领域先行者</p>
                    </div>
                    <button className="HeadNav" onClick={()=>{
                        this.setState({
                            index:this.state.index,
                            showItem:!this.state.showItem
                        });
                    }}>
                    </button>
                </div>

                {this._renderItems()}
            </div>
        );
    }

    render() {
        if (Utils.IsPhone()) {
            return this._renderPhone();
        }

        let items = [];
        for (let i=0; i< itemInfos.length; i++) {
            let LinkInfo = itemInfos[i];
            let style = {};
            let line ;
            if (this.state.index === i) {
                style = {
                    color: "#FF4800"
                };
                line =  <div className="HeadLine"/>;
            }
            items.push(
                <div className="HeadItemView" key={i}>
                    <Link  to={LinkInfo['link']}>
                        <button className="HeadItem" style={style} onClick={()=>{
                            sessionStorage.index = i;
                            this.setState({
                                index:i,
                                showItem:this.state.showItem
                            })
                        }}>
                            {LinkInfo['name']}
                        </button>
                    </Link>
                    {line}
                </div>

            );
        }
        return (
                <div className="AppHead">
                    <img src={require('../../image/logo1.png')} alt="logo" className="Logo"/>
                    <div className="HeadName" >
                        <p className="logoName">郑州佰胜网络科技有限公司</p>
                        <p>一流的软件服务商，互联网开发领域先行者</p>
                    </div>

                    <div className="HeadCenter">
                        {items}
                    </div>


                    <div className="HeadCall">
                        <div className="HeadCallItem">
                            <img src={require('../../image/phone.png')} alt="phone" style={{width:15, height:15,marginRight:10}}/>
                            <p>咨询电话： 18539290519(7x24h)</p>
                        </div>
                        <div className="HeadCallItem">
                            <img src={require('../../image/qq.png')} alt="qq" style={{width:15, height:15,marginRight:10}}/>
                            <p>咨询QQ：1010314912(7x24)</p>
                        </div>
                    </div>

                </div>
        );
    }
}



